<template>
  <div class="videoModal-body" v-if="visible">
    <div class="modal-header">
      <div class="left-icon"></div>
      <div class="name">视频监控</div>
      <div class="close-button" @click="_handleClose()"></div>
    </div>
    <div class="modal-body">
      <div class="video-container">
        <playerEzviz
          v-if="videoShow"
          :id="videoItem.uuid"
          :appkey="videoItem.appkey"
          :secret="videoItem.secret"
          :deviceSerialNumber="videoItem.deviceSerialNumber"
          :channelNumber="videoItem.channelNumber"
        ></playerEzviz>
        <div class="video-footer">
          <!-- <div class="time">2023-12-12 12:23:34</div> -->
          <div class="name">{{ videoItem.videoName || "" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//视频监控弹窗
import { axios } from "@/utils/request";
import playerEzviz from "@/components/player-ezviz";
export default {
  name: "VideoModal",
  components: {
    playerEzviz,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    ancUUID: {
      type: String,
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      videoShow: false,
      videoItem: {},
    };
  },
  mounted() {},
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        axios
          .post(
            `/probusiness/zhgdVideo/getDetailByUuid?uuid=${this.ancUUID}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.videoItem = res;
            this.videoShow = true;
          })
          .catch((_) => {
            this.videoShow = false;
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    _handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.videoModal-body {
  height: 500px;
  width: 700px;
  display: flex;
  flex-direction: column;
  background: rgba(1, 30, 38, 0.7);
  border: 1px solid rgba(142, 227, 251, 0.3);
  border-top: none;
  box-sizing: border-box;
  border-radius: 0 10px 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: overlay !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.6);
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.1);
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none;
    }
  }
  .modal-header {
    height: 36px;
    flex-shrink: 0;
    background: yellow;
    background: linear-gradient(
      90deg,
      rgba(0, 167, 216, 0.7),
      rgba(0, 77, 99, 0)
    );
    position: relative;
    &::before {
      content: "";
      display: flex;
      width: 300px;
      height: 40px;
      background: url("~@/assets/img/portalEntry/modal_icon_1.png");
      position: absolute;
      left: 0;
      top: 0;
      background-size: 100% 100%;
    }
    &::after {
      content: "";
      display: flex;
      width: 75px;
      height: 36px;
      background: url("~@/assets/img/portalEntry/modal_icon_2.png");
      position: absolute;
      right: 0;
      top: 0;
      background-size: 100% 100%;
    }
    .left-icon {
      position: absolute;
      width: 21px;
      height: 36px;
      background: url("~@/assets/img/portalEntry/modal_icon_3.png");
      position: absolute;
      left: 0;
      top: 0;
      background-size: 100% 100%;
    }
    .close-button {
      position: absolute;
      width: 12px;
      height: 12px;
      background: url("~@/assets/img/portalEntry/modal_icon_4.png");
      position: absolute;
      right: 12px;
      top: 12px;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 9;
      &:hover {
        opacity: 0.5;
      }
    }
    .name {
      color: #fff;
      font-size: 18px;
      letter-spacing: 2px;
      position: relative;
      z-index: 9;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 16px;
    }
  }
  .modal-body {
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    .custom-scrollbar();
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    .video-container {
      height: 520px;
      background: #000;
      position: relative;
      .video-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        box-sizing: border-box;
        padding: 0 16px;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 34px;
      }
    }
    &::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      bottom: 0px;
      left: 0px;
      background: url("~@/assets/img/portalEntry/modal_icon_5.png");
      background-size: 100% 100%;
    }
    &::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      bottom: 0px;
      right: 0px;
      background: url("~@/assets/img/portalEntry/modal_icon_6.png");
      background-size: 100% 100%;
    }
  }
}
</style>
